<template>
  <div class="warp">
    <div class="warp_auto">
      <div class="warp_top">
        <div class="jiansuo-box">
          <span class="label">患者姓名：</span>
          <el-input
            v-model="patientName"
            class="input"
            clearable
            placeholder="请输入患者姓名"
          />
        </div>

        <el-button
          type="primary"
          icon="el-icon-search"
          class="btn"
          @click="btn"
        >检索
        </el-button
        >
        <el-button
          icon="el-icon-plus"
          class="btn"
          @click="reservationClick"
        >预约
        </el-button
        >
      </div>

      <el-card>
        <el-table
          :data="bedReservationList"
          style="width: 100%"
          stripe
          :header-cell-style="{ background: '#d2e0f9', color: '#606266' }"
          :cell-style="{'text-align':'center'}"
        >
          <el-table-column type="index" label="序号" align="center"/>
          <el-table-column label="患者姓名" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.patientName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="当前科室" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.currentDepartment }}</span>
            </template>
          </el-table-column>
          <el-table-column label="预约床位号" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.reservationBed }}</span>
            </template>
          </el-table-column>
          <el-table-column label="预约时间" align="center" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.reservationTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="预约人" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.reservationName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.reservationNotes }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.status == '1' ? "已确认" : "未确认" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="确认人" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.confirmName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="确认时间" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.confirmTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="确认床号" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.confirmBed }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="240" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row.id)"
              >确认
              </el-button
              >
              <el-popover
                :ref="`popover-${scope.$index}`"
                trigger="click"
                placement="top"
                width="100"
              >
                <p class="el-icon-warning">确定删除</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="no(scope)"
                  >取消
                  </el-button
                  >
                  <el-button type="primary" size="mini" @click="deleteItem(scope)"
                  >确定
                  </el-button
                  >
                </div>
                <el-button
                  slot="reference"
                  size="mini"
                  style="margin-left: 10px"
                  type="danger"
                >删除
                </el-button
                >
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <div class="paging">
          <el-pagination
            :current-page="start"
            :page-size="PageSize"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

    <el-dialog title="床位预约" :visible.sync="dialogVisible">
      <el-form res="reservationRef" label-width="120px">
        <el-form-item label="患者姓名: ">
          <el-input v-model="basicInfo.patientName"/>
        </el-form-item>
        <el-form-item label="性别: ">
          <el-select
            v-model="basicInfo.sex"
            placeholder="请选择"
            clearable
            class="input"
          >
            <el-option
              v-for="item in sexOptions"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="年龄: ">
          <el-input v-model="basicInfo.age" oninput="value=value.replace(/[^0-9]/g,'')"/>
        </el-form-item>
        <el-form-item label="诊断: ">
          <el-input v-model="basicInfo.diagnosisContent"/>
        </el-form-item>
        <el-form-item label="当前科室: ">
          <el-input v-model="basicInfo.currentDepartment"/>
        </el-form-item>
        <el-form-item label="预约科室: ">
          <el-input v-model="basicInfo.reservationDep"/>
        </el-form-item>
        <el-form-item label="预约床位: ">
          <el-select
            v-model="basicInfo.reservationBed"
            placeholder="请选择预约床位"
            clearable
            class="input"
          >
            <el-option
              v-for="item in bedList"
              :key="item.id"
              :value="item.bed_name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="预约时间:">
          <el-date-picker
            v-model="basicInfo.reservationTime"
            type="datetime"
            format="yyyy-MM-dd hh:mm"
            value-format="yyyy-MM-dd hh:mm"
          />
        </el-form-item>
        <el-form-item label="预约人: ">
          <el-select
            v-model="basicInfo.reservationName"
            filterable
            :filter-method="signFilter"
          >
            <el-option
              v-for="item in signOptions"
              :key="item.id"
              :value="item.user_name"
              :label="item.user_name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="预约备注: ">
          <el-input
            type="textarea"
            v-model="basicInfo.reservationNotes"
          />
        </el-form-item>
        <div v-if="operation == 'edit'">
          <el-form-item label="确认人: ">
            <el-select
              v-model="basicInfo.confirmName"
              filterable
              :filter-method="signFilter"
            >
              <el-option
                v-for="item in signOptions"
                :key="item.id"
                :value="item.user_name"
                :label="item.user_name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="确认时间:">
            <el-date-picker
              v-model="basicInfo.confirmTime"
              type="datetime"
              format="yyyy-MM-dd hh:mm"
              value-format="yyyy-MM-dd hh:mm"
            />
          </el-form-item>
          <el-form-item label="确认床位: ">
            <el-select
              v-model="basicInfo.confirmBed"
              placeholder="请选择确认床位"
              clearable
              class="input"
            >
              <el-option
                v-for="item in bedList"
                :key="item.id"
                :value="item.bed_name"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="确认备注: ">
            <el-input
              type="textarea"
              v-model="basicInfo.confirmNotes"
            />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="saveClick">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserListByUserTypegetNurseList,
  bedReservationListQueryByPage,
  bedReservationListDeleteById,
  bedReservationListAdd,
  bedReservationQueryById,
  List,
} from "@/api/table";

export default {
  data() {
    return {
      operation: 'add', //当前操作，默认为添加 ‘add’,'edit'
      dialogVisible: false,
      dialogInfo: {},
      start: 1, // 默认显示第几页
      totalCount: 0, // 总条数，根据接口获取数据长度(注意：这里不能为空)
      pgeSizes: [10, 20, 30, 40], // 个数选择器（可修改）
      PageSize: 10, // 默认每页显示的条数（可修改）
      bedReservationList: [],
      bedList: [],//床位列表
      patientName: '',
      arrUserName: [],
      signOptions: [],
      sexOptions: [{
        id: "1",
        value: "1",
        label: "男",
      }, {
        id: "2",
        value: "2",
        label: "女",
      }],
      basicInfo: {
        id: "",
        patientName: "", //患者姓名
        sex: "", //性别
        age: "", //年龄
        diagnosisContent: "", //诊断
        currentDepartment: "", //当前科室
        reservationDep: "", //预约科室
        reservationBed: "", //预约床位号
        reservationTime: "", //预约时间
        reservationName: "", //预约人
        reservationNotes: "", //预约备注
        confirmName: "", //确认人
        confirmNotes: "", //确认备注
        confirmTime: "", //确认时间
        confirmBed: "", //确认床号
      },
    };
  },
  created() {
    //获取床位列表
    // getBedPatientList().then((res) => {
    //   this.bedList = res.data;
    // });
    List({status: '1',}).then((res) => {
      this.bedList = res.data;
    });

    //获取签名列表
    getUserListByUserTypegetNurseList({
      deptCode: this.$store.state.user.loginInfo.deptCode
    }).then((res) => {
      this.arrUserName = res.data;
      Object.assign(this.signOptions, res.data);
    });
  },
  mounted() {
    this.bedReservationQuery(this.PageSize, this.start);
  },
  methods: {
    signFilter(val) {
      this.value = val;
      if (val) { //val存在
        this.signOptions = this.arrUserName.filter((item) => {
          if (item.user_name.indexOf(val) >= 0 || item.login_name.indexOf(val) >= 0) {
            return true
          }
        })
      } else { //val为空时，还原数组
        Object.assign(this.signOptions, this.arrUserName);
      }
    },
    //删除
    deleteItem(scope) {
      bedReservationListDeleteById(scope.row.id).then((res) => {
        if (res.code === 200) {
          this.$message({message: "删除成功", type: "success"});
          this.bedReservationQuery(this.PageSize, this.start);
        } else {
          this.$message({message: "删除失败", type: "warning"
          });
        }
      });
      scope._self.$refs[`popover-${scope.$index}`].doClose();
    },
    //取消删除
    no(scope) {
      this.$message("取消删除");
      scope._self.$refs[`popover-${scope.$index}`].doClose();
    },
    // 搜索按钮
    btn() {
      this.start = 1;
      this.bedReservationQuery(this.PageSize, this.start);
    },
    //打开编辑页面
    handleEdit(id) {
      this.operation = 'edit';
      this.dialogVisible = true;

      this.basicInfoInit();

      bedReservationQueryById(id).then((res) => {
        console.log(res.data,'bedReservationQueryById');
        this.basicInfo = res.data;
      });
    },
    //查询床位预约列表
    bedReservationQuery(PageSize, start) {
      bedReservationListQueryByPage({
        start: start,
        size: PageSize,
        patientName: this.patientName
      }).then((res) => {
        this.bedReservationList = res.data;
        this.totalCount = res.totalCount;
        this.$forceUpdate();
      });
    },
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 点击每页显示的条数时，显示第一页
      this.list(val, 1);
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.start = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.start = val;
      // 切换页码时，要获取每页显示的条数
      this.bedReservationQuery(this.PageSize, this.start);
    },
    basicInfoInit(){
      this.basicInfo = {
        id: "",
        patientName: "", //患者姓名
        sex: "", //性别
        age: "", //年龄
        diagnosisContent: "", //诊断
        currentDepartment: "", //当前科室
        reservationDep: "", //预约科室
        reservationBed: "", //预约床位号
        reservationTime: "", //预约时间
        reservationName: "", //预约人
        reservationNotes: "", //预约备注
        confirmName: "", //确认人
        confirmNotes: "", //确认备注
        confirmTime: "", //确认时间
        confirmBed: "", //确认床号
      };
    },
    //打开添加页面
    reservationClick() {
      this.operation = 'add';
      this.basicInfoInit();
      this.dialogVisible = true;
    },
    saveClick() {
      //确认状态更改
      this.basicInfo.status = this.basicInfo.confirmName != '' ? '1' : '0';

      bedReservationListAdd(this.basicInfo).then((res) => {
        if (res.code === 200) {
          this.$message({message: "保存成功", type: "success"});
          this.bedReservationQuery(this.PageSize, this.start);
          this.dialogVisible = false;
        } else {
          this.$message({message: res.msg, type: "warning"});
        }

      });
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 600px;
}
</style>
